<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->

<html lang="zh-CN">

<head>
  <base href="./" />
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  <meta name="description" content="iCollege学习平台" />
  <meta name="author" content="HeWenhai GCC" />
  <meta name="keyword" content="iCollege 学习平台" />
  <link rel="shortcut icon" href="img/favicon.ico" />
  <title>用户管理-学习平台</title>
  <!-- Icons-->
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet" />
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet" />
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
  <!-- Main styles for this application-->
  <link href="css/style.css" rel="stylesheet" />
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet" />
</head>

<body class="app header-fixed  sidebar-md-close sidebar-lg-show aside-menu-fixed">
  <header class="app-header navbar ">
    <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="mx-3 navbar-brand" href="#">
      <span class="navbar-brand-full" width="89" height="30">&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/brand/icollege.svg"
          width="30" height="30" alt="iCollege Logo" />
        学习平台</span>

      <img class="navbar-brand-minimized" src="img/brand/icollege.svg" width="30" height="30" alt="iCollege Logo" />
    </a>
    <!--
          <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
            <span class="navbar-toggler-icon"></span>
          </button>
    -->

    <ul class=" mx-2 nav navbar-nav d-md-down-none">
      <li class="nav-item px-3">
        <a class="nav-link" href="dashboard">工作台</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="course">课程管理</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="settings">设置</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-bell"></i>
          <span class="badge badge-pill badge-danger">5</span>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-list"></i>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-location-pin"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com" />
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header text-center">
            <strong>Account</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-bell-o"></i> Updates
            <span class="badge badge-info">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-envelope-o"></i> Messages
            <span class="badge badge-success">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-tasks"></i> Tasks
            <span class="badge badge-danger">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-comments"></i> Comments
            <span class="badge badge-warning">42</span>
          </a>
          <div class="dropdown-header text-center">
            <strong>Settings</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-user"></i> Profile</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-wrench"></i> Settings</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-usd"></i> Payments
            <span class="badge badge-secondary">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-file"></i> Projects
            <span class="badge badge-primary">42</span>
          </a>
          <div class="divider"></div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-shield"></i> Lock Account</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-lock"></i> Logout</a>
        </div>
      </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
      <span class="navbar-toggler-icon"></span>
    </button>
  </header>

  <div class="app-body">
    <main class="main">
      <!-- Breadcrumb -->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">首页</li>
        <li class="breadcrumb-item active">用户管理</li>

        <!-- Breadcrumb Menu-->
        <li class="breadcrumb-menu d-md-down-none">
          <div class="btn-group" role="group" aria-label="Button group">
            <!--<a class="btn" href="/user"><i
                        class="fa fa-user-secret"></i>新增</a>-->
          </div>
        </li>
      </ol>
      <!--main content-->
      <div class="container">
        <div class="animated fadeIn" id="items-manager">
          <div class="card">
            <div class="card-header">
              <i class="icon-people icons"></i> 用户管理
              <div class="card-header-actions">
                <a class="btn btn-ghost-primary" @click="showItemForm(null)">
                  <i class="icon-plus icons"></i> &nbsp;新增
                </a>
                <a class="btn btn-ghost-danger" @click="confirmRemoveAll">
                  <i class="icon-trash icons"></i> &nbsp;删除
                </a>
              </div>
            </div>
            <div class="card-body">
              <table class="table table-responsive-sm table-bordered  table-hover  table-sm">
                <thead>
                  <tr>
                    <th style="width: 10px">
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" data-action="do-check-all" name="checkAll" />
                        <label class="form-check-label" for="checkAll"></label>
                      </div>
                    </th>
                    <th>用户名</th>
                    <th>注册时间</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th style="width: 140px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in pageItems">
                    <td>
                      <div class="form-check form-check-inline">
                        <!--  data-action="do-check"
                            v-bind:data-argument="startIndex+index" -->
                        <input class="form-check-input" type="checkbox" v-model="item.checked"
                          v-bind:name="'item-' + item.index" />#{{ item.index }}
                        <label class="form-check-label" v-bind:for="'item-' + item.index"></label>
                      </div>
                    </td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.registerDate }}</td>
                    <td>{{ item.role }}</td>
                    <td>
                      <span class="badge badge-success" v-if="item.status=='激活'">{{ item.status }}</span>
                      <span class="badge badge-danger" v-if="item.status=='禁用'">{{ item.status }}</span>
                    </td>

                    <td>
                      <a class="btn btn-primary btn-sm" @click="showItemForm(item)">
                        <i class="fa fa-edit"></i>&nbsp;编辑</a>
                      <a class="btn btn-danger  btn-sm" @click="confirmRemove(item)">
                        <i class="fa fa-close"></i>&nbsp;删除</a>
                    </td>
                  </tr>
                </tbody>
              </table>

              <div class="row justify-content-end">
                <div class="col-lg-auto">
                  <nav aria-label="Page navigation example">
                    <ul class="pagination">
                      <li class="page-item">
                        <a class="page-link" v-on:click="previous()" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                          <span class="sr-only">Previous</span>
                        </a>
                      </li>
                      <li class="page-item" v-for="n in pageCount" v-bind:class="n==paging.offset+1 ? 'active' : ''">
                        <a class="page-link" v-on:click="paging.offset = n-1">{{ pageStartIndex + n }}</a>
                      </li>
                      <li class="page-item" v-if="isPageMore">
                        <a class="page-link" v-on:click="paging.offset = 10">...</a>
                      </li>
                      <li class="page-item ">
                        <a class="page-link" v-on:click="next()" aria-label="Next">
                          <span aria-hidden="true">&raquo;</span>
                          <span class="sr-only">Next</span>
                        </a>
                      </li>
                    </ul>
                  </nav>
                </div>
                <!-- 划分一页加载数据 -->
                <div class="col-lg-2">
                  <select class="custom-select" v-model="paging.size">
                    <option v-for="option in paging.sizeOptions" v-bind:value="option.value">
                      {{ option.text }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="modal " id="confirm-modal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="confirm-modal-title">危险</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body font-weight-bold" id="confirm-modal-content">
                  记录删除后将无法恢复!确定要删除吗？
                </div>
                <div class="modal-footer">
                  <input type="hidden" id="itemIds" />
                  <button type="button" class="btn btn-danger" data-dismiss="modal" @click="removeItems">
                    确定
                  </button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    取消
                  </button>
                </div>
              </div>
              <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
          </div>
          <!-- /.modal #confirm-modal -->

          <div class="modal " id="message-modal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="message-modal-title">信息</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body font-weight-bold" id="message-modal-content">
                  显示信息！
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal">
                    确定
                  </button>
                </div>
              </div>
              <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
          </div>
          <!-- /.modal #message-modal -->

          <div class="modal " id="form-modal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-primary" role="document" id="item-modal">
              <div class="modal-content">
                <form id="item-form" class="needs-validation" novalidate>
                  <div class="modal-header">
                    <h4 class="modal-title">用户信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group row">
                      <label for="name" class="col-sm-3 col-form-label">用户名</label>
                      <div class="col-sm-9">
                        <!-- pattern="^[-a-zA-Z0-9_\·\u4e00-\u9fa5]{2,16}$" -->
                        <!-- pattern="^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$" -->
                        <input class="form-control" type="text" placeholder="用户名" v-model="formItem.name" required
                          pattern="^([\u4e00-\u9fa5·A-Za-z][\u4e00-\u9fa5·A-Za-z0-9-_]{1,10})$" title="" />
                        <small id="nameHelpBlock" class="form-text text-muted">
                          用户名必须以英文字母或中文字符开头，2个或以上字符（中文，字母，·，数字，下划线或减号）
                        </small>
                        <!-- <div class="invalid-feedback">
              用户名不能为空，并且用户名必须4到16位（字母，数字，下划线，减号）！
            </div> -->
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="registerDate" class="col-sm-3 col-form-label">注册时间</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="text" id="registerDate" v-model="formItem.registerDate"
                          placeholder="注册时间" readonly />
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="role" class="col-sm-3 col-form-label">角色</label>
                      <div class="col-sm-9">
                        <select id="role" class="form-control" v-model="formItem.role">
                          <option value="教师">教师</option>
                          <option value="学生">学生</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="stauts-active" class="col-sm-3 col-form-label">状态</label>
                      <div class="col-sm-9">
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" v-model="formItem.status"
                            name="inlineRadioOptions" id="inlineRadio1" value="激活" />
                          <label class="form-check-label" for="inlineRadio1">激活</label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" v-model="formItem.status"
                            name="inlineRadioOptions" id="inlineRadio2" value="禁用" />
                          <label class="form-check-label" for="inlineRadio2">禁用</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="saveItem">
                      保存
                    </button>
                    <button type="button" data-dismiss="modal" class="btn btn-secondary">
                      取消
                    </button>
                  </div>
                </form>
              </div>
              <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
          </div>
          <!-- /.modal #form-modal -->
        </div>
      </div>
    </main>

    <aside class="aside-menu">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab">
            <i class="icon-list"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#messages" role="tab">
            <i class="icon-speech"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#settings" role="tab">
            <i class="icon-settings"></i>
          </a>
        </li>
      </ul>
      <!-- Tab panes-->
      <div class="tab-content">
        <div class="tab-pane active" id="timeline" role="tabpanel">
          <div class="list-group list-group-accent">
            <div
              class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
              Today
            </div>
            <div class="list-group-item list-group-item-accent-warning list-group-item-divider">
              <div class="avatar float-right">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
              </div>
              <div>
                Meeting with
                <strong>Lucas</strong>
              </div>
              <small class="text-muted mr-3">
                <i class="icon-calendar"></i> 1 - 3pm
              </small>
              <small class="text-muted">
                <i class="icon-location-pin"></i> Palo Alto, CA
              </small>
            </div>
            <div class="list-group-item list-group-item-accent-info">
              <div class="avatar float-right">
                <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com" />
              </div>
              <div>
                Skype with
                <strong>Megan</strong>
              </div>
              <small class="text-muted mr-3">
                <i class="icon-calendar"></i> 4 - 5pm
              </small>
              <small class="text-muted">
                <i class="icon-social-skype"></i> On-line
              </small>
            </div>
            <div
              class="list-group-item list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
              Tomorrow
            </div>
            <div class="list-group-item list-group-item-accent-danger list-group-item-divider">
              <div>
                New UI Project -
                <strong>deadline</strong>
              </div>
              <small class="text-muted mr-3">
                <i class="icon-calendar"></i> 10 - 11pm
              </small>
              <small class="text-muted">
                <i class="icon-home"></i> creativeLabs HQ
              </small>
              <div class="avatars-stack mt-2">
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com" />
                </div>
              </div>
            </div>
            <div class="list-group-item list-group-item-accent-success list-group-item-divider">
              <div><strong>#10 Startups.Garden</strong> Meetup</div>
              <small class="text-muted mr-3">
                <i class="icon-calendar"></i> 1 - 3pm
              </small>
              <small class="text-muted">
                <i class="icon-location-pin"></i> Palo Alto, CA
              </small>
            </div>
            <div class="list-group-item list-group-item-accent-primary list-group-item-divider">
              <div>
                <strong>Team meeting</strong>
              </div>
              <small class="text-muted mr-3">
                <i class="icon-calendar"></i> 4 - 6pm
              </small>
              <small class="text-muted">
                <i class="icon-home"></i> creativeLabs HQ
              </small>
              <div class="avatars-stack mt-2">
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/3.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/5.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                </div>
                <div class="avatar avatar-xs">
                  <img class="img-avatar" src="img/avatars/8.jpg" alt="admin@bootstrapmaster.com" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane p-3" id="messages" role="tabpanel">
          <div class="message">
            <div class="py-3 pb-5 mr-3 float-left">
              <div class="avatar">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                <span class="avatar-status badge-success"></span>
              </div>
            </div>
            <div>
              <small class="text-muted">Lukasz Holeczek</small>
              <small class="text-muted float-right mt-1">1:52 PM</small>
            </div>
            <div class="text-truncate font-weight-bold">
              Lorem ipsum dolor sit amet
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              do eiusmod tempor incididunt...
            </small>
          </div>
          <hr />
          <div class="message">
            <div class="py-3 pb-5 mr-3 float-left">
              <div class="avatar">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                <span class="avatar-status badge-success"></span>
              </div>
            </div>
            <div>
              <small class="text-muted">Lukasz Holeczek</small>
              <small class="text-muted float-right mt-1">1:52 PM</small>
            </div>
            <div class="text-truncate font-weight-bold">
              Lorem ipsum dolor sit amet
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              do eiusmod tempor incididunt...
            </small>
          </div>
          <hr />
          <div class="message">
            <div class="py-3 pb-5 mr-3 float-left">
              <div class="avatar">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                <span class="avatar-status badge-success"></span>
              </div>
            </div>
            <div>
              <small class="text-muted">Lukasz Holeczek</small>
              <small class="text-muted float-right mt-1">1:52 PM</small>
            </div>
            <div class="text-truncate font-weight-bold">
              Lorem ipsum dolor sit amet
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              do eiusmod tempor incididunt...
            </small>
          </div>
          <hr />
          <div class="message">
            <div class="py-3 pb-5 mr-3 float-left">
              <div class="avatar">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                <span class="avatar-status badge-success"></span>
              </div>
            </div>
            <div>
              <small class="text-muted">Lukasz Holeczek</small>
              <small class="text-muted float-right mt-1">1:52 PM</small>
            </div>
            <div class="text-truncate font-weight-bold">
              Lorem ipsum dolor sit amet
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              do eiusmod tempor incididunt...
            </small>
          </div>
          <hr />
          <div class="message">
            <div class="py-3 pb-5 mr-3 float-left">
              <div class="avatar">
                <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com" />
                <span class="avatar-status badge-success"></span>
              </div>
            </div>
            <div>
              <small class="text-muted">Lukasz Holeczek</small>
              <small class="text-muted float-right mt-1">1:52 PM</small>
            </div>
            <div class="text-truncate font-weight-bold">
              Lorem ipsum dolor sit amet
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
              do eiusmod tempor incididunt...
            </small>
          </div>
        </div>
        <div class="tab-pane p-3" id="settings" role="tabpanel">
          <h6>Settings</h6>
          <div class="aside-options">
            <div class="clearfix mt-4">
              <small>
                <b>Option 1</b>
              </small>
              <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                <input class="switch-input" type="checkbox" checked="" />
                <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
              </label>
            </div>
            <div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </small>
            </div>
          </div>
          <div class="aside-options">
            <div class="clearfix mt-3">
              <small>
                <b>Option 2</b>
              </small>
              <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                <input class="switch-input" type="checkbox" />
                <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
              </label>
            </div>
            <div>
              <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </small>
            </div>
          </div>
          <div class="aside-options">
            <div class="clearfix mt-3">
              <small>
                <b>Option 3</b>
              </small>
              <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                <input class="switch-input" type="checkbox" />
                <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
              </label>
            </div>
          </div>
          <div class="aside-options">
            <div class="clearfix mt-3">
              <small>
                <b>Option 4</b>
              </small>
              <label class="switch switch-label switch-pill switch-success switch-sm float-right">
                <input class="switch-input" type="checkbox" checked="" />
                <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
              </label>
            </div>
          </div>
          <hr />
          <h6>System Utilization</h6>
          <div class="text-uppercase mb-1 mt-4">
            <small>
              <b>CPU Usage</b>
            </small>
          </div>
          <div class="progress progress-xs">
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
              aria-valuemax="100"></div>
          </div>
          <small class="text-muted">348 Processes. 1/4 Cores.</small>
          <div class="text-uppercase mb-1 mt-2">
            <small>
              <b>Memory Usage</b>
            </small>
          </div>
          <div class="progress progress-xs">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70"
              aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">11444GB/16384MB</small>
          <div class="text-uppercase mb-1 mt-2">
            <small>
              <b>SSD 1 Usage</b>
            </small>
          </div>
          <div class="progress progress-xs">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95"
              aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">243GB/256GB</small>
          <div class="text-uppercase mb-1 mt-2">
            <small>
              <b>SSD 2 Usage</b>
            </small>
          </div>
          <div class="progress progress-xs">
            <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10"
              aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <small class="text-muted">25GB/256GB</small>
        </div>
      </div>
    </aside>
  </div>

  <footer class="app-footer">
    <div>
      <a href="https://coreui.io">iCollege</a>
      <span>&copy; 2019 GCC.</span>
    </div>
    <div class="ml-auto">
      <span>技术支持</span>
      <a href="mailto:hewenhai@126.com">@HeWenhai</a>
    </div>
  </footer>

  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="vendors/vue/vue.js"></script>
  <script src="vendors/lodash/lodash.min.js"></script>
  <script src="vendors/mock/mock-min.js"></script>
  <script src="vendors/axios/axios.min.js"></script>
  <script src="vendors/moment/moment-with-locales.js"></script>
  <script>
    var server = {
      url: {
        fetch: "http://localhost:5500/users/all",
        save: "http://localhost:5500/users/save",
        delete: "http://localhost:5500/user/delete"
      }
    };

    var pagingData = {
      size: 10,
      offset: 0,
      total: 0,
      serverSize: 100,
      serverOffset: 0,
      serverTotal: 0,
      sizeOptions: [{
          text: "10/页",
          value: "10"
        },
        {
          text: "20/页",
          value: "20"
        },
        // { text: '30/页', value: '30' },
        {
          text: "50/页",
          value: "50"
        },
        {
          text: "100/页",
          value: "100"
        }
      ]
    };

    var items = [];

    var app = null;

    $(function () {
      Mock.mock(server.url.fetch, {
        "data|100": [{
          id: "@increment()",
          name: "@cname", //中文名称
          "role|1": ["教师", "学生"], //100以内随机整数
          registerDate: "@datetime()", //日期
          "status|1": ["激活", "禁用"] //中国城市
        }],
        "total|150-500": 250,
        success: true,
        code: 200,
        msg: "Success"
      });

      Mock.mock(server.url.save, {
        data: [],
        "success|1": [true, false],
        "code|1": [200],
        "msg|1": ["Success", "Fail"]
      });

      Mock.mock(server.url.delete, {
        data: [],
        "success|1": [true, false],
        "code|1": [200],
        "msg|1": ["Success", "Fail"]
      });

      axios
        .get(server.url.fetch)
        .then(function (response) {
          // handle success
          var responseData = response.data.data;
          var itemData = _.map(responseData, function (item, index) {
            item.checked = false;
            item.index = index;
            return item;
          });
          items = itemData;
          pagingData.total = items.length;
          pagingData.serverTotal = response.data.total;
          if (items.length < pagingData.serverSize) {
            pagingData.serverTotal = items.length;
          }
          app = new Vue({
            el: "#items-manager",
            data: {
              items: items,
              paging: pagingData,
              formItem: {
                id: -1,
                name: "",
                registerDate: moment().format("YYYY-MM-DD hh:mm:ss"),
                role: "",
                status: "禁用"
              },
              deleteItems: {}
            },
            computed: {
              pageItems: function () {
                var paging = this.paging;
                return this.items.filter(function (value, index) {
                  return (
                    index >= paging.offset * paging.size &&
                    index < (paging.offset + 1) * paging.size
                  );
                });
              },
              pageCount: function () {
                var pageCount = Math.ceil(
                  this.paging.serverTotal / this.paging.size
                );
                return pageCount > 10 ? 10 : pageCount;
              },
              pageStartIndex: function () {
                var pageCount = Math.ceil(
                  this.paging.serverSize * this.paging.serverOffset / this.paging.size
                );
                return pageCount > 10 ? 10 : pageCount;
              },
              isPageMore: function (pageNumber) {
                var pageCount = Math.ceil(
                  this.paging.serverTotal / this.paging.size
                );
                return pageCount > 10;
              }
            },
            methods: {
              previous: function () {
                if (this.paging.offset > 0) {
                  this.paging.offset -= 1;
                }
              },
              next: function () {
                if (this.paging.offset < this.pageCount - 1) {
                  this.paging.offset += 1;
                }
              },
              newItem: function () {
                return {
                  checked: false,
                  id: -1,
                  index: -1,
                  name: "",
                  registerDate: moment().format("YYYY-MM-DD hh:mm:ss"),
                  role: "学生",
                  status: "禁用"
                };
              },
              showMessageModal: function (options) {
                $("#message-modal").modal("hide");
                if (!options || options === undefined) {
                  options = {
                    title: "标题",
                    content: "内容",
                    type: "modal-info"
                  };
                }
                $("#message-modal-title").text(options.title);
                $("#message-modal-content").text(options.content);
                $('#message-modal [role="document"]').removeClass();
                $('#message-modal [role="document"]').addClass(options.type);
                $('#message-modal [role="document"]').addClass(
                  "modal-dialog"
                );
                $("#message-modal").modal("show");
              },
              confirmRemove: function (item) {
                this.deleteItems = item;
                $("#confirm-modal").modal("show");
              },
              confirmRemoveAll: function () {
                var deletes = _.filter(this.items, function (item) {
                  return item.checked;
                });
                if (deletes.length > 0) {
                  _.reverse(deletes);
                  this.deleteItems = deletes;
                  $("#confirm-modal").modal("show");
                } else {
                  this.showMessageModal({
                    title: "警告",
                    content: "未选取需要删除的元素，无法进行删除操作！",
                    type: "modal-warning"
                  });
                }
              },
              removeItems: function () {
                if (this.deleteItems instanceof Array) {
                  _.forEach(this.deleteItems, function (item) {
                    items.splice(item.index, 1);
                  });
                  this.deleteItems = null;
                } else {
                  this.items.splice(this.deleteItems.index, 1);
                }
                _.forEach(this.items, function (item, index) {
                  item.index = index;
                });
                this.showMessageModal({
                  title: "信息",
                  content: "删除成功！",
                  type: "modal-success"
                });
              },
              showItemForm: function (item) {
                if (!item || item === undefined) {
                  item = this.newItem();
                }
                this.formItem = JSON.parse(JSON.stringify(item));
                $("#item-form").removeClass("was-validated");
                $("#form-modal").modal("show");
              },
              validateForm: function () {
                var form = $("#item-form").get(0);
                var validated = form.checkValidity();
                form.classList.add("was-validated");
                return validated;
              },
              saveItem: function () {
                var validated = this.validateForm();
                if (validated) {
                  if (this.formItem.id === -1) {
                    var index = this.paging.offset * this.paging.size;
                    items.splice(index, 0, this.formItem);
                    _.forEach(this.items, function (item, index) {
                      item.index = index;
                    });
                  } else {
                    var item = items[this.formItem.index];
                    item.name = this.formItem.name;
                    item.registerDate = this.formItem.registerDate;
                    item.role = this.formItem.role;
                    item.status = this.formItem.status;
                  }
                  $("#form-modal").modal("hide");
                  this.showMessageModal({
                    title: "信息",
                    content: "保存成功！",
                    type: "modal-success"
                  });
                }
              }
            }
          });
          app.$watch("paging.size", function (newVal, oldVal) {
            this.paging.offset = Math.floor(
              (this.paging.offset * oldVal) / newVal
            );
            return;
          });
          app.$watch("paging.offset", function (newVal, oldVal) {
            var serverPageIndex = Math.ceil(this.paging.serverSize / this.paging.size);
            if (newVal >= serverPageIndex) {
              axios
                .get(server.url.fetch)
                .then(function (response) {
                  // handle success
                  var responseData = response.data.data;
                  var itemData = _.map(responseData, function (item, index) {
                    item.checked = false;
                    item.index = index;
                    return item;
                  });
                  items = itemData;
                  app.$data.items = items;
                  pagingData.total = items.length;
                  pagingData.serverTotal = response.data.total;
                  if (items.length < pagingData.serverSize) {
                    pagingData.serverTotal = items.length;
                  }
                });
              return;
            }
          })
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    });
  </script>
</body>

</html>